<template>
  <div class="app-container">
    <el-card class="box-card">
      <el-form ref="form" :model="form">
        <el-descriptions  title="监管任务信息"  :column="2" border >
          <el-descriptions-item label="流水号" :span="1"  :contentStyle='contentStyle' label-class-name="my-label" :labelStyle="labelStyle" >{{ form.sequenceNumber}}</el-descriptions-item>
          <el-descriptions-item label="监管JDS" :span="1"  :contentStyle='contentStyle'label-class-name="my-label" :labelStyle="labelStyle" >
            <dict-tag :options="dict.type.yh_representative_office" :value="form.representativeOffice" />
          </el-descriptions-item>
        </el-descriptions>
        <br/>
        <el-descriptions  title="风险信息"  :column="2" border >
          <el-descriptions-item label="告知单编号" :span="1" :contentStyle='contentStyle' label-class-name="my-label" :labelStyle="labelStyle" >{{ form.adviseNo }}</el-descriptions-item>
          <el-descriptions-item label="发生原因" :span="1"  :contentStyle='contentStyle' label-class-name="my-label" :labelStyle="labelStyle" >{{ form.occurrenceReason }}</el-descriptions-item>
          <el-descriptions-item label="潜在后果" :span="1"  :contentStyle='contentStyle' label-class-name="my-label" :labelStyle="labelStyle" >{{ form.consequence }}</el-descriptions-item>
          <el-descriptions-item label="风险来源" :span="1"  :contentStyle='contentStyle' label-class-name="my-label" :labelStyle="labelStyle" >{{ form.riskOrigin }}</el-descriptions-item>
          <el-descriptions-item label="影响范围" :span="1"  :contentStyle='contentStyle' label-class-name="my-label" :labelStyle="labelStyle" >{{ form.influenceScope }}</el-descriptions-item>
          <el-descriptions-item label="概率等级" :span="1"  :contentStyle='contentStyle' label-class-name="my-label" :labelStyle="labelStyle" >
            <dict-tag :options="dict.type.yh_probability_level" :value="form.probabilityLevel" />
          </el-descriptions-item>
          <el-descriptions-item label="后果等级"  :contentStyle='contentStyle' label-class-name="my-label" :labelStyle="labelStyle" >
            <dict-tag :options="dict.type.yh_consequences_level" :value="form.consequencesLevel" />
          </el-descriptions-item>
          <el-descriptions-item label="是否关闭"  :contentStyle='contentStyle' label-class-name="my-label" :labelStyle="labelStyle" >
            <dict-tag :options="dict.type.yh_suspend" :value="form.suspend" style = "float:left;"/>
          </el-descriptions-item>
          <el-descriptions-item label="关闭日期" :span="2" :contentStyle='contentStyle' label-class-name="my-label" :labelStyle="labelStyle" v-if="form.suspend == '1'">{{ form.suspendDate }}</el-descriptions-item>
          <el-descriptions-item label="关闭说明" :span="2" label-class-name="my-label" :labelStyle="labelStyle" >{{ form.suspendDeclare}}</el-descriptions-item>
          <el-descriptions-item label="备注" :span="2" label-class-name="my-label" :labelStyle="labelStyle" >{{ form.remark}}</el-descriptions-item>
        </el-descriptions>
      </el-form>
      <br/>
      <div style="float:right; margin-bottom: 15px;">
        <el-button @click="viewCancel">返 回</el-button>
      </div>
    </el-card>
  </div>
</template>

<script>
  import { listProject, getProject, delProject, addProject, updateProject } from "@/api/module/cjl/project";
  import { getToken } from "@/utils/auth";
  import { treeselect } from "@/api/system/dept";
  import Treeselect from "@riophae/vue-treeselect";
  import "@riophae/vue-treeselect/dist/vue-treeselect.css";
  import watermark from "watermark-dom";
  export default {
    name: "Project",
    dicts: ['yh_probability_level', 'yh_representative_office','yh_consequences_level','yh_suspend'],
    components: { Treeselect },
    data() {
      return {
        //内容样式
        contentStyle: {
          'width': '600px',
        },
        labelStyle: { 'width': '140px','color': '#000000','text-align': 'right', },
        // 遮罩层
        loading: true,
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 显示搜索条件
        showSearch: false,
        // 总条数
        total: 0,
        // 部门树选项
        deptOptions: undefined,
        // 项目风险表格数据
        projectList: [],
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          adviseNo: null,
          sequenceNumber: null,
          representativeOffice: null,
          riskOrigin: null,
          occurrenceReason: null,
          consequence: null,
          influenceScope: null,
          probabilityLevel: null,
          consequencesLevel: null,
          suspend: null,
          suspendDate: null,
          suspendDeclare: null,
          createBy: null,
          createTime: null,
          updateBy: null,
          updateTime: null,
          remark: null,
          note1: null,
          note2: null,
          note3: null,
          note4: null,
          note5: null,
          note6: null,
          note7: null,
          note8: null,
          note9: null,
          note10: null
        },
        // 表单参数
        form: {},

      };
    },
    mounted() {
      watermark.load({ watermark_txt: "  "   });
    },
    created() {
      this.getTreeselect();
      const id = this.$route.query.id;
      if (id) {
        // 获取表详细信息
        getProject(id).then(res => {
          this.form = res.data;
        });
      }
    },
    methods: {
      /** 关闭按钮 */
      viewCancel() {
        const id = this.$route.query.id;
        getProject(id).then(response => {
          this.form = response.data;

        });
        const obj = { path: "/hetong/cjlproject", query: {id} };
        this.$tab.closeOpenPage(obj);
      },
      /** 查询部门下拉树结构 */
      getTreeselect() {
        treeselect().then(response => {
          this.deptOptions = response.data;
        });
      },
    }
  };
</script>
<style lang="scss" scoped>

</style>
